<template>
  <el-menu default-active="1-4-1" class="el-menu-vertical-demo" background-color="black" height="auto" text-color="#fff"
           active-text-color="#ffd04b" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <h3>{{ isCollapse ? '后台' : '汽车后台管理系统' }}</h3>
    <el-menu-item @click="clickMenu(item)" v-for="item in menu" :index="item.path" :key="item.path">
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{ item.name }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "MenuVue",
  data() {
    return {
      menu: []
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    clickMenu(item) {
      if (item.path === this.$route.path) {
        return;
      }
      this.$router.push(item.path)
      this.$store.commit('selectMenu', item)
    },
    usermation() {
      this.menu = JSON.parse(localStorage.getItem('permissions'))
      console.log(this.menu)
    }
  },
  computed: {
    isCollapse() {
      return this.$store.state.tab.isCollapse
    }
  },
  mounted() {
    this.usermation()
  },
}
</script>


<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu {
  height: 100%;
  border: none;
  height: 100vh;

  h3 {
    color: aliceblue;
    text-align: center;
    line-height: 48px;
  }

}
</style>
